<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>登陆</title>
<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="/js/gt.js"></script>

</head>
<body>
<form action="/login" method="POST">
	提示<h5 th:text="${msg}"></h5>
 	用户名:<input type="text" name="username"><br/>
 	密码:<input type="password" name="password"><br/>
 	验证码<input type="text" name="VerificationCode"><img src="/captcha" width="150px" height="45px">
 	<input type="checkbox" name="rememberMe">记住我<br/>
 	 <label>完成验证：</label>
      <div id="captcha">
          <div id="text">
              行为验证™ 安全组件加载中
          </div>
          <div id="wait">
              <div >
                  <div class="loading-dot"></div>
                  <div class="loading-dot"></div>
                  <div class="loading-dot"></div>
                  <div class="loading-dot"></div>
              </div>
          </div>
      </div>
      <input type="submit" value="登陆"><br/>
 </form>
 
 

<script>
    var handler = function (captchaObj) {
        captchaObj.appendTo('#captcha');
        captchaObj.onReady(function () {
            $("#wait").hide();
        });
        $('input[type=submit]').click(function () {
            var result = captchaObj.getValidate();
            if (!result) {
                return alert('请完成验证');
            }
            /* $.ajax({
                url: 'verifyLogin',
                type: 'POST',
                dataType: 'json',
                data: {
                    username: $('#username2').val(),
                    password: $('#password2').val(),
                    geetest_challenge: result.geetest_challenge,
                    geetest_validate: result.geetest_validate,
                    geetest_seccode: result.geetest_seccode
                },
                success: function (data) {
                    if (data.status === 'success') {
                        alert('登录成功');
                    } else if (data.status === 'fail') {
                        alert('登录失败，请完成验证');
                        captchaObj.reset();
                    }
                }
            }); */
        })
        // 更多接口说明请参见：http://docs.geetest.com/install/client/web-front/
        window.gt = captchaObj;
    };


    $.ajax({
        url: "startCaptcha?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        success: function (data) {
            $('#text').hide();
            $('#wait').show();
            // 调用 initGeetest 进行初始化
            // 参数1：配置参数
            // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它调用相应的接口
            initGeetest({
                // 以下 4 个配置参数为必须，不能缺少
                gt: data.gt,
                challenge: data.challenge,
                offline: !data.success, // 表示用户后台检测极验服务器是否宕机
                new_captcha: data.new_captcha, // 用于宕机时表示是新验证码的宕机

                product: "float", // 产品形式，包括：float，popup
                width: "300px" 
                
                // 更多配置参数说明请参见：http://docs.geetest.com/install/client/web-front/
            }, handler);
        }
    });
</script>
</body>
</html>